import { AboutSlint, Button, VerticalBox, Palette, Slider } from "std-widgets.slint";

component CircularPath inherits Path {
    in property <float> progress: 100;
    in property <color> fg_color: green;
    in property <float> inner-radius: 45;
    in property <float> start : 0;
    
    private property <float> progressClamped: clamp(progress, 0, 0.9999);

    fill-rule: FillRule.nonzero;
    viewbox-width: 100;
    viewbox-height: 100;
    stroke-width: 0px;
    fill: fg_color;

    MoveTo {
        y: 50 - 50 * cos(-root.start * 360deg);
        x: 50 - 50 * sin(-root.start * 360deg);
    }

    ArcTo {
        y: 50 - root.inner-radius * cos(-root.start * 360deg);
        x: 50 - root.inner-radius * sin(-root.start * 360deg);
        radius-x: 1;
        radius-y: 1;
    }

    ArcTo {
        radius-x: root.inner-radius;
        radius-y: root.inner-radius;
        y: 50 - root.inner-radius*cos(-(root.start + root.progressClamped) * 360deg);
        x: 50 - root.inner-radius*sin(-(root.start + root.progressClamped) * 360deg);
        sweep: root.progressClamped > 0;
        large-arc: root.progressClamped > 0.5;
    }

    ArcTo {
        y: 50 - 50*cos(-(root.start + root.progressClamped) * 360deg);
        x: 50 - 50*sin(-(root.start + root.progressClamped) * 360deg);
        radius-x: 1;
        radius-y: 1;
    }

    ArcTo {
        radius-x: 50;
        radius-y: 50;
        y: 50 - 50 * cos(-root.start * 360deg);
        x: 50 - 50 * sin(-root.start * 360deg);
        sweep: root.progressClamped < 0;
        large-arc: root.progressClamped > 0.5;
    }
}

export component CircularProgress {
    in property <float> progress <=> cp.progress;
    in property <color> bg_color;
    in property <color> fg_color <=> cp.fg_color;
    in property <color> txt_color;
    in property <string> prog_text;
    in property <string> lbl_text;
    
    Rectangle {
        Rectangle {
            border-color: bg_color;
            border-radius: self.height/2;
            width: cp.width * 0.965;
            height: cp.height * 0.965;
            border-width: 3px;
        }
        cp := CircularPath {
            width: 100%;
            height: 100%;
            inner-radius: 45;
            start: 0;
            stroke-width: 0px;
            fg_color: red;

            animate progress {
                duration: 1s;
            }
        }
        Timer := Text {
            font-family: "Roboto Mono";
            text: prog_text;
            color: txt_color;
            font-size: 46px;
        }
        task-label := Text {
            text: lbl_text;
            font-family: "Lato";
            y: parent.height * 0.70;
            color: txt_color;
            font-size: 12pt;
        }
    }
}